<template>
  <div class="wrapper">
    <swiper :options="swiperOption" ref="mySwiper"  class="my-swiper">
      <swiper-slide v-for="(item, index) in imgs" :key="index">
        <img :src="item" alt="">
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
/**
* descripe:轮播图
* date: 2019-
* author: yezhanxiang
*/
  export default {
    data () {
      return {
        imgs: [require("../assets/static/temp/banner2.jpg"), require("../assets/static/temp/banner3.jpg"), require("../assets/static/temp/banner4.jpg")],
        swiperOption: {
          notNextTick: true,
          loop:true,
          speed:1000,
          autoplay: {
            delay: 3000,//秒
            stopOnLastSlide: false,
            disableOnInteraction: false,//滑动不会失效
          },
          pagination: {
            el: '.swiper-pagination',
            clickable :true,
          },
          paginationClickable: true,
        },
        bannerImgs:[{
                src: '../assets/static/temp/banner3.jpg',
                background: "rgb(203, 87, 60)",
            },
            {
                src: '../assets/static/temp/banner2.jpg',
                background: "rgb(205, 215, 218)",
            },
            {
                src: '../assets/static/temp/banner4.jpg',
                background: "rgb(183, 73, 69)",
            }
        ]
      }
    },
    components: {

    },
    computed: {
      swiper () {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted () {
    },
    methods: {
      callback (val) {
        console.log(val);
      }
    }
  }
</script >

<style lang='stylus' scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background: red
  .wrapper
    margin-top 0.8rem
    .my-swiper
      .swiper-wrapper
        .swiper-slide
          img
            width: 100%
</style>
